Antd For React 爬坑记录

Form表单

1. 经过Form.create()包裹的组件可以通过wrappedComponentRef拿到;

   class CustomizedForm extends React.Component { ... }
   
   // use wrappedComponentRef
   const EnhancedForm =  Form.create()(CustomizedForm);
   <EnhancedForm wrappedComponentRef={(form) => this.form = form} />
   this.form // => The instance of CustomizedForm

2. 经过getFieldDecorator包裹的表单，再使用mapPropsToFields映射父组件、redux、dva中的数据时，表单的值会被完全可控，无法单独设置初始值；

3. Form表单的动态校验方法（两个表单相互校验）

   compareToFirstPassword = (rule, value, callback) => {
       const { form } = this.props;
       if (value && value !== form.getFieldValue('password')) {
         callback('Two passwords that you enter is inconsistent!');
       } else {
         callback();
       }
     };
   
     validateToNextPassword = (rule, value, callback) => {
       const { form } = this.props;
       if (value && this.state.confirmDirty) {
         form.validateFields(['confirm'], { force: true });
       }
       callback();
     };
   
     <Form.Item label="Password" hasFeedback>
             {getFieldDecorator('password', {
               rules: [
                 {
                   required: true,
                   message: 'Please input your password!',
                 },
                 {
                   validator: this.validateToNextPassword,
                 },
               ],
             })(<Input.Password />)}
           </Form.Item>
           <Form.Item label="Confirm Password" hasFeedback>
             {getFieldDecorator('confirm', {
               rules: [
                 {
                   required: true,
                   message: 'Please confirm your password!',
                 },
                 {
                   validator: this.compareToFirstPassword,
                 },
               ],
             })(<Input.Password onBlur={this.handleConfirmBlur} />)}
           </Form.Item>

4. 经过getFieldDecorator包裹的表单 onChange 事件，我们还是可以进行操作的，可以拿到我们需要的值, 例如重新封装后的TreeSelect组件

   onChange(value, label, extra ){
       console.log(value, label, extra)
       // value 是当前表单的value值
       // lable 是Tree的二级标题
       // extra 则是选中的node节点，你可以拿到你想要的任何值
   }

Tabs

1. TabPane的key值很重要，增删改查的时候key值不要用index;

持续更新中